<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="退款详情" navbarType='0' bgColor="#FFFFFF"></wlk-navbar>
        <view class="bgw pd30 br08 order-info">
            <view class="head-title bold">申请信息</view>
            <view class="wlkflex other-info mt30">
                <view class="other-title mr10">退单编号</view>
                <view>{{order.refund_sn}}</view>
            </view>
            <view class="wlkflex other-info mt30">
                <view class="other-title mr10">当前状态</view>
                <view>{{order.refund_status_text}}</view>
            </view>
            <view class="wlkflex other-info mt30">
                <view class="other-title mr10">申请时间</view>
                <view>{{$u.timeFormat(order.createtime,'yyyy-mm-dd hh:MM:ss')}}</view>
            </view>
            <view class="wlkflex other-info mt30">
                <view class="other-title mr10">退款金额</view>
                <view v-if="order.refund_fee>0">¥{{order.refund_fee}}</view>
            </view>
            <view class="wlkflex other-info mt30">
                <view class="other-title mr10">申请备注</view>
                <u--textarea disabled :customStyle="{backgroundColor:'#F9F9F9'}" border="none" v-model="order.remark" ></u--textarea>
            </view>
        </view>
        <view class="bgw pd30 br08 order-info">
            <view class="head-title bold">平台反馈</view>
            <view class="wlkflex other-info mt30">
                <view class="other-title mr10">回复内容</view>
                <u--textarea disabled :customStyle="{backgroundColor:'#F9F9F9'}" border="none" v-model="order.sys_msg" ></u--textarea>
            </view>
        </view>
        <view class="wlk-fixed-btn" v-if="order.refund_status==1">
            <u-button :customStyle="{
                    fontWeight: 'bold',
			        borderRadius:'8px',
			          width:'92%'
                }" :color="themeColor" size="large" throttleTime="500" @click="refundModel=true" text="取消申请"></u-button>
        </view>
        <u-modal :show="refundModel" title="提示" showCancelButton @confirm="unRefund" @cancel="refundModel=false" :confirmColor="themeColor" content="是否取消退款申请？"></u-modal>

    </view>
</template>

<script>
    import {mapMutations, mapGetters} from 'vuex';
    var _self;
    export default {
        computed: {
            ...mapGetters(['themeColor'])
        },
		data() {
			return {
			    id:'',
                order:[],
                refundModel:false,
                remark:'',
                refund_fee:'',

			};
		},
		onLoad(options) {
		    _self = this;
		    let  id = this.$Route.query.id;
		    _self.id = id
		},
		onShow() {
			this.getData();
		},
		methods: {
            unRefund(){
                uni.$u.http.post('refund/unRefund', {
                    id:_self.order.id,
                }).then(res => {
                    uni.$u.toast(res.msg);
                    _self.refundModel = false;
                    _self.getData();
                }).catch(error => {
                    uni.$u.toast(`${error.message}`)
                })
            },
			async getData() {
                uni.$u.http.post('refund/getData', {
                    id:_self.id
                }).then(res => {
                    _self.order = res.data.order;
                }).catch(res => {
                })
			},

		},
	};
</script>

<style lang="scss">
    .order-info{
        margin: 30rpx;
        .head-title{
            font-size: $font-lg;
            .desc{
                font-size: $font-base;
                font-weight: normal;
            }
        }
        .line-info{
            .title{
                width: 90%;
                font-size: $font-lt;
            }
        }
        .other-info{
            font-size: $font-base;
            .other-title{
                color:$uni-text-color-grey;
                width: 22%;
            }
            .other-wd-title{
                color:$uni-text-color-grey;
                width: 23%;
            }
            .copy-btn{
                padding: 5rpx 20rpx;
                border-radius: 30rpx;
                border:$-solid-border ;
                font-size: $font-sm;
                color:$uni-text-color-grey;
            }
        }
        .other-desc{
            font-size: $font-base;
        }
    }
    .wlk-fixed-btn{
        box-shadow: none;
        background-color: transparent;
    }
</style>
